<script setup>
import { ref } from 'vue'
import SearchComponent from '@/components/SearchComponent/SearchComponent.vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useSearchStore } from '@/stores/index.js'
import { usePostStore } from '@/stores/index.js'

const SearchStore = useSearchStore()
const PostStore = usePostStore()

// 是否搜索全部数据
const searchAll = ref(null)

// 接收到的搜索词
const keyword = ref('')

// 搜索框组件获取到的数据
const searchListData = ref([])

// 本地搜索记录
const searchHistory = ref([])

// 接收搜索框组件获取到的数据
const handleSearch = (data) => {
	searchListData.value = data
}

// 清空搜索历史
const clearHistory = () => {
	searchHistory.value = []
	SearchStore.clearSearchHistoryData()
}

// 点击搜索历史继续搜索
const onClickHistory = (item) => {
	keyword.value = item
}

// 点击获取到的搜索数据项跳转相应的页面
const onClickSearchItem = (item) => {
	let id = null
	if (item.scenery_id) {
		id = item.scenery_id
	} else if (item.hotel_id) {
		id = item.hotel_id
	} else if (item.restaurant_id) {
		id = item.restaurant_id
	} else if (item.post_id) {
		id = item.post_id
	}

	if (searchAll.value === 'false') {
		// 将类型名字存储进Pinia
		PostStore.setPostData({ association_id: id, type: item.dataType, locationName: item.name })
		uni.navigateBack()
	} else {
		uni.navigateTo({
			url: `/ComprehensivePackage/Detail/Detail?detail_id=${id}&type=${item.dataType}`
		})
	}
}

onLoad((option) => {
	if (option) {
		searchAll.value = option.searchAll
		keyword.value = option.keyword
	}
})

onShow(() => {
	// 读取本地的搜索记录
	if (uni.getStorageSync('search')) {
		const historyObj = JSON.parse(uni.getStorageSync('search'))
		searchHistory.value = historyObj.searchHistoryData
	}
})
</script>

<template>
	<view class="container">
		<!-- 搜索框组件 -->
		<view class="search">
			<SearchComponent :switch="true" :searchAll="searchAll" @search="handleSearch" :keyword="keyword"></SearchComponent>
		</view>

		<!-- 搜索历史 -->
		<view class="history" v-show="searchListData.length === 0">
			<view class="header">
				<view class="left">历史记录</view>
				<view class="right" @tap="clearHistory">
					<up-icon name="trash" size="20"></up-icon>
				</view>
			</view>

			<view class="history-content">
				<view class="item" v-for="(item, index) in searchHistory" :key="index" @tap="onClickHistory(item)">
					{{ item }}
				</view>
			</view>
		</view>

		<!-- 搜索到的数据 -->
		<scroll-view scroll-y="true" class="content" v-show="searchListData.length > 0">
			<view v-for="(item, index) in searchListData" :key="index" class="content-item" @tap="onClickSearchItem(item)">
				<view class="name">
					<text
						class="iconfont"
						:class="{
							'icon-lvyou': item.dataType === 'scenery',
							'icon-jiudian': item.dataType === 'hotel',
							'icon-cantingcaipin': item.dataType === 'restaurant',
							'icon-gonglve': item.dataType === 'post'
						}"
					></text>
					<view class="name-right">
						{{ item.dataType === 'post' ? item.title : item.name }}
					</view>
				</view>

				<view class="bottom" v-if="item.dataType !== 'post'">
					<view class="left">
						<view class="rating">
							{{ item.rating }}
						</view>

						<view v-if="item.grade" class="grade">
							{{ item.grade }}
						</view>
					</view>

					<view class="right">
						<view class="price">{{ Math.floor(item.price) === 0 ? '免费' : '￥' + Math.floor(item.price) }}</view>
						<view class="qi" v-if="item.price !== '0.00'">起</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<up-empty
			v-if="searchListData.length === 0"
			mode="search"
			textSize="20"
			width="300"
			height="300"
			icon="https://leyouhui-1327374532.cos.ap-beijing.myqcloud.com/Static/search.png"
		></up-empty>
	</view>
</template>

<style lang="scss" scoped>
.container {
	height: 100vh;
	background-color: #fff;

	.search {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: sticky;
		background-color: #fff;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.history {
		padding: 20rpx;
		height: auto;

		.header {
			display: flex;
			justify-content: space-between;
			font-size: 35rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}

		.history-content {
			display: flex;
			flex-wrap: wrap;

			.item {
				height: 80rpx;
				display: flex;
				align-items: center;
				padding: 0 15rpx;
				background-color: #f5f5f5;
				margin: 10rpx;
				border-radius: 30rpx;
			}
		}
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.content-item {
			padding: 20rpx;
			border-bottom: 3rpx solid #dcdcdc;
			display: flex;
			flex-direction: column;

			.name {
				display: flex;
				align-items: center;

				.iconfont {
					margin-right: 10rpx;
				}

				.icon-lvyou {
					color: #8674fb;
				}

				.icon-jiudian {
					color: #3fb1fc;
				}

				.icon-cantingcaipin {
					color: #1bce73;
				}

				.icon-gonglve {
					color: #fa8551;
				}
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				color: #9999b3;
				margin-top: 20rpx;

				.left {
					display: flex;

					.rating {
						margin-right: 20rpx;
					}
				}

				.right {
					display: flex;
					justify-content: center;
					align-items: baseline;

					.price {
						color: #fc5549;
						font-weight: bold;
					}

					.qi {
						padding-left: 5rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}
}
</style>
